<!-- 项目动态 -->
<template>
  	<div class="main main-dynamic">
		<div class="head pt32 pb32">
			<div class="back-title ft14">
				<div class="back pr32 align-row-center pointer" @click="$router.back(-1)">
                    <i class="icon ic_back mr8"></i>
                    <span>返回</span>
                </div>
				<div class="fc-black">{{ projectInfo.shortName }}>{{ type == '1' ? '项目经理总结' : '动态'}}</div>
			</div>
            <div class="pr48" v-if="isManager && type == 1">
                <div class="align-row-center pointer" @click="openAddSummary">
                    <i class="icon add_new-job mr8"></i>
                    <span class="fc-gray ft14">追加总结</span>
                </div>
            </div>
		</div>
        <!-- <div class="add-dynamic pb24" v-if="isManager && type == 1">
            <div class="align-row-center pointer" @click="openAddSummary">
                <i class="icon add_new-job mr8"></i>
                <span class="fc-gray ft14">追加总结</span>
            </div>
        </div> -->
		<div class="content pb24 scrollbar-y">
       <div class="list-dynamic " v-if="dataList.length>0">
                <div class="item pointer pb16" v-for="(item,index) in dataList" :key="index">
                    <div class="item-release  pt40 pr48 pb24 pl40">
                        <div class="item-head">
                            <div class="head-img"><img :src="!!item.createUserHeadImage == true ? serverIp.setImgUrl(item.createUserHeadImage) : defaultHeadImg"/></div>
                            <div class="head-content pr24">
                                <div class="space-between ">
                                    <p class="ft14 fc-black " v-text="item.createUserName"></p>
                                    <div class="flex flex-space-between">
                                        <i class="icon ic_edit mr32 pointer" v-if="type == 1 && index == 0 && isManager == true && new Date().getTime() < (1000 * 60 * 60 * 24) + (item.addTime * 1)" @click="openEditSummary(item)" title="修改"></i>
                                        <i class="icon ic_delete-fill pointer" v-if="type == 1 && index == 0 && isManager == true && new Date().getTime() < (1000 * 60 * 60 * 24) + (item.addTime * 1)" @click="deleteSummary(item.id)" title="删除"></i>
                                    </div>
                                </div>

                                <div class="align-row-center ft12 fc-gray">
                                    <div class="align-row-center pr32">
                                        <i class="icon ic_fill mr8 "></i>
                                        <span v-text="item.projectShortName"></span>
                                    </div>
                                    <div class="align-row-center" v-if="type == 1">
                                        <i class="icon ic_schedule mr8"></i>
                                        <span class="mr16">项目进度：{{ item.progressProportion || 0}}%</span>
                                        <i class="icon mr8" :class="item.upDown > 0 ? 'ic_up' : (item.upDown < 0 ? 'ic_down' : 'ic_flat')"></i>
                                        <span class="ft12" :class="item.upDown > 0 ? 'fc-blue' : (item.upDown < 0 ? 'fc-orange' : 'fc-gray')">{{ item.upDown }}%</span>
                                    </div>
                                    <div class="align-row-center" v-else>
                                        <i class="icon ic_flag-fill mr8" v-if="item.managerReport == true || !!item.planName == true"></i>
                                        <span class="mr16">{{ item.managerReport == true ? '项目经理一周总结' : item.planName }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-content">
                            <p class="content-text ft14 lh30" :title="item.content" v-text="item.content"></p>
                            <div class="pt16 space-between">
                                <p class="fc-gray">{{ !!item.addTime == true ? new Date(item.addTime).Format('yyyy-MM-dd hh:mm') :'' }}</p>
                                <div class="align-row-center">
                                    <i class="icon mr16" :class="item.selfLikes == true ? 'ic_like' : 'ic_dislike'" @click="setLikes(item)" :title="item.selfLikes == true ? '取消点赞' : '点赞'"></i>
                                    <span class="mr50" v-text="item.dynamicLikesVos != null ? item.dynamicLikesVos.length || 0 : 0"></span>
                                    <i class="icon ic_comment-dots mr16" @click="setPingLunInputShow(item)" :title="item.zdy_isShowPingLunInput == 1 ? '取消评论' : '评论'"></i>
                                    <span v-text="item.oneLevelComments != null ? item.oneLevelComments.length || 0 : 0"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item-comment"  v-show="item.zdy_isShowPingLunInput != 0 || (item.dynamicLikesVos != null && item.dynamicLikesVos.length > 0) || (item.oneLevelComments != null && item.oneLevelComments.length > 0)">
                        <div class="comment">
                            <div class="comment_zan" v-if="item.dynamicLikesVos != null && item.dynamicLikesVos.length > 0">
                                <i class="icon mt5 ic_like mr12"></i>
                                <div class="zan_likes">
                                    <span class="ft14" v-for="(itemLikes,indexLikes) in item.dynamicLikesVos" :key="indexLikes">
                                        {{ itemLikes.userName + ((indexLikes + 1) != item.dynamicLikesVos.length ? '，' : '') }}
                                    </span>
                                </div>
                            </div>
                          <div class="mb19 pt16" v-if="item.dynamicLikesVos != null && item.dynamicLikesVos.length > 0&&item.oneLevelComments.length>0" style="border-bottom: 1px solid #dee6ec;"></div>
                          <div :class="['comment_pinglun',indexPL==0?'':'pt16',indexPL==0?'':'bd-t']" v-for="(itemPL,indexPL) in item.oneLevelComments" :key="indexPL">
                                <div class="pinglun_tx mt5"><img :src="!!itemPL.userHeadImage == true ? serverIp.setImgUrl(itemPL.userHeadImage) : defaultHeadImg"/></div>
                                <div class="pinglun_item">
                                    <p class="ft14 lh24">
                                        <span class="fc-blue" v-text="itemPL.userName"></span>
                                        <span v-if="!!itemPL.responseUserName == true">
                                            回复&nbsp;
                                            <span class="fc-blue" v-text="itemPL.responseUserName"></span>
                                        </span>：
                                        <span class="fc-black word_wrap" v-text="itemPL.content"></span>
                                    </p>
                                    <p class="ft12 fc-gray lh32">
                                        <span class="mr24" v-text="!!itemPL.addTime == true ? new Date(itemPL.addTime).Format('yyyy-MM-dd hh:mm') :''"></span>
                                        <span class="" @click="setHuiFuInputShow(item,itemPL)">回复</span>
                                    </p>
                                </div>
                            </div>
                            <div class="comment_pinglun pt16" v-show="item.zdy_isShowPingLunInput != 0">
                                <div class="pinglun_tx"><img :src="!!$store.state.userInfo.headImage == true ? serverIp.setImgUrl($store.state.userInfo.headImage) : defaultHeadImg"/></div>
                                <div class="pinglun_item">
                                    <div class="pinglun_input">
                                        <el-input
                                            type="textarea"
                                            :resize="'none'"
                                            autosize
                                            :placeholder="item.zdy_isShowPingLunInput == 1 ? '请输入评论内容' : '回复@' + huiFuName"
                                            v-model="item.zdy_content"
                                            :size="'small'"
                                            style="width:562px;"
                                            >
                                        </el-input>
                                    </div>
                                </div>
                                <div class="pinglun_btns">
                                    <div class="pinglun_btn" @click="addPingLunSubmit(item)">评论</div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        <div v-if="dataList.length==0" class="default-page-manager">
              <div class="box">
                <img src="../../../assets/img/defaultPage/pic_ej_xmujl.png" alt="">
                <p>此项目暂无项目经理总结</p>
              </div>
            </div>
		</div>
        <transition name="fade">
            <div class="main-popup"  v-if="is_show_setSummary">
                <set-summary @close="closeModal" @callback="setSummaryCallback" :data="addOrEditData" />
            </div>
        </transition>
        <transition name="fade">
            <div class="main-popup"  v-if="is_show_deleteSummary">
                <message-box @close="closeModal" @callback="deleteSummaryCallback" :indexClose="'is_show_deleteSummary'" :content="'动态删除后不可再恢复，请确认是否要删除该动态？'"></message-box>
            </div>
        </transition>
  	</div>

</template>

<script>
import setSummary from '@/components/projectInfo/setSummary'; //设置项目总结
import messageBox from '@/components/base/messageBox'; //消息弹窗
export default {
    components: {
        setSummary,
        messageBox
    },
	data () {
		return {
            dynamicCommentId:'',  //回复人id
            huiFuName:'', //回复人名称
            is_show_setSummary:false,
            is_show_deleteSummary:false,
            deleteId:'',
            projectId:'',
            type:'',
            addOrEditData:{},
            projectInfo:{},
            dataList:[],
            isManager:false, //是否是项目经理
            defaultHeadImg:require('../../../assets/img/ic_tx_gzq.png')
		};
	},
	computed: {},
	created(){
        this.projectId = this.$route.query.projectId;
        this.type = this.$route.query.type;
    },
	mounted(){
        this.getProjectInfo();
        this.getDataList();
    },
	methods: {
        closeModal(res){
            this[res] = false;
        },
        openAddSummary(){
            this.is_show_setSummary = true;
            this.addOrEditData = {
                projectId:this.projectId,
                projectName:this.projectInfo.shortName,
                currentProgress:this.projectInfo.progressProportion
            };
        },
        openEditSummary(item){
            this.is_show_setSummary = true;
            this.addOrEditData = {
                projectId:this.projectId,
                dynamicId:item.id,
                content:item.content,
                progressProportion:item.progressProportion,
                warning:item.warning,
                projectName:this.projectInfo.shortName,
                currentProgress:item.progressProportion,
            };
        },
        deleteSummary(id){
            this.deleteId = id;
            this.is_show_deleteSummary = true;
        },
        deleteSummaryCallback(res,indexClose){
            var json = {
                dynamicId:this.deleteId
            };
            this.$http.post("/plan/dynamic/delete",json).then(res =>{
                if(res.statusCode == 200){
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.closeModal(indexClose);
                    this.getDataList();
                }
            }).catch(err =>{
                console.log(err)
            })
        },
        getProjectInfo(){
            var json = {
                projectId:this.projectId,
                userId:this.$store.state.userInfo.userId
            };
            this.$http.post("/project/project/info",json).then(res =>{
                if(res.statusCode == 200){
                    this.projectInfo = res.data;
                    if(this.projectInfo.managerId == this.$store.state.userInfo.userId){
                        this.isManager = true;
                    }
                }
            }).catch(err =>{
                console.log(err)
            })
        },
        //获取动态
        getDataList(){
            var json = {
                companyId: this.$store.state.userInfo.companyId,
                userId:this.$store.state.userInfo.userId,
                projectId: this.projectId,
                pageNum:1,
                pageSize:9999
            };
            if(this.type == '1'){
                json.managerReport = true; //查项目经理总结
            }else{
                json.managerReport = false; //查项目经理总结
            }

            this.$http.get('/plan/dynamic/list', {
                params: json
            }).then(res => {
                if(res.statusCode == 200){
                    var list = (res.data && res.data.list ) || [];
                    if(list.length > 0){
                        list.forEach( item =>{
                            item.zdy_content = ''; //自定义参数  评论内容
                            item.zdy_isShowPingLunInput = false; //自定义参数  是否显示评论框
                        });
                    }
                    this.dataList = list;
                    // this.dataList = (res.data && res.data.list ) || [];
                    // this.setDataListBasicData();
                }else{
                    this.dataList = [];
                }
            }).catch( error => {
                console.log(error);
            });
        },
        setSummaryCallback(){
            this.is_show_setSummary = false;
            this.addOrEditData = {};
            this.$message({
                message: '保存成功',
                type: 'success'
            });
            this.getProjectInfo();
            this.getDataList();
        },
        setLikes(item){
            this.dynamicLikes(item.id);
            if(item.selfLikes == true){
                //取消点赞 删除数组
                item.selfLikes = false;
                for(let i = 0,len = item.dynamicLikesVos.length; i < len; i++){
                    let d = item.dynamicLikesVos[i];
                    if(d.userId == this.$store.state.userInfo.userId){
                        item.dynamicLikesVos.splice(i,1);
                        return;
                    }
                }

            }else{
                //点赞 添加数组
                item.dynamicLikesVos.push({
                    userId:this.$store.state.userInfo.userId,
                    userName:this.$store.state.userInfo.name,
                });
                item.selfLikes = true;
            }
        },
        //点赞或者取消点赞
        dynamicLikes(dynamicId){
            let json = {
                dynamicId:dynamicId,
                userId:this.$store.state.userInfo.userId,
            };
            this.$http.post("/plan/dynamic/likes/likes",json).then(res =>{
                if(res.statusCode == 200){

                }
            }).catch(err =>{
                console.log(err)
            })
        },
        addPingLunSubmit(item){
            if(item.zdy_content == ''){
                this.$message({
                    message: '请输入内容',
                    type: 'error'
                });
                return false;
            }
            let json = {
                ateUserId:[],
                content:item.zdy_content,
                dynamicCommentId:this.dynamicCommentId,//回复id
                dynamicId:item.id,
                userId:this.$store.state.userInfo.userId,
            };
            this.$http.post("/plan/dynamic/comment/insert",json).then(res =>{
                if(res.statusCode == 200){
                    item.oneLevelComments && item.oneLevelComments.push(res.data);
                    item.zdy_content = '';
                    item.zdy_isShowPingLunInput = 0;
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                }
            }).catch(err =>{
                console.log(err)
            })
        },
        setDataListBasicData(){
            if(this.dataList != null && this.dataList.length > 0){
                this.dataList.forEach( item =>{
                    item.zdy_content = ''; //自定义参数  评论内容
                    item.zdy_isShowPingLunInput = 0; //自定义参数  是否显示评论框

                });
            }
        },
        setPingLunInputShow(item){
            item.zdy_isShowPingLunInput = item.zdy_isShowPingLunInput == 0 ? 1 : 0;
            item.zdy_content = '';
            this.dynamicCommentId = ''; //清除回复人id
            this.huiFuName = '';
        },
        setHuiFuInputShow(item,itemPL){
            item.zdy_isShowPingLunInput = 2;
            item.zdy_content = '';
            this.dynamicCommentId = itemPL.commentId; //清除回复人id
            this.huiFuName = itemPL.userName;
        }
    }
}

</script>
<style lang='scss' scoped type="text/scss">
	.main{
		height:100%;
		// overflow:hidden;
		display:flex;
		flex-direction:column;
        min-width:854px;
		>.head{
			display:flex;
			justify-content:space-between;
			align-items:center;
			.back-title{
				display:flex;
				align-items:center;
				.back{
					color: #96a2aa;
				}
			}
		}
		>.content{
      .default-page-manager{
       width: 100%;
        height: 100%;
        background-color: #ffffff;
        position: relative;
        .box{
          width: 230px;
          height: 260px;
          text-align: center;
          font-size: 18px;
          color: #96A2AA;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        }
      }
            // flex:1;
            height:calc(100% - 80px);
			display:flex;
            flex-wrap:wrap;

            >.list-dynamic{
                min-width:510px;
                width:100%;
                height:100%;
                // display:flex;
                // flex-wrap:wrap;
                // align-content:flex-start;
                // justify-content: center;
                overflow-y:auto;
                &::-webkit-scrollbar {
                    display: none
                }
                -ms-overflow-style: none; /* IE 10+ */
                scrollbar-width: none; /* Firefox */
                >.item{
                    width: 854px;
                    margin:0 auto;
                    >.item-release{
                        width:100%;
                        background-color: #ffffff;
                        box-shadow: 0px 0px 20px 0px
                            rgba(10, 82, 228, 0.06);
                        // border-radius: 6px;
                        border-top-left-radius: 6px;
                        border-top-right-radius: 6px;
                        .item-head{

                            display:flex;
                            .head-img{
                                width:48px;
                                height:48px;
                                margin-right:24px;
                                >img{
                                    border-radius: 50%;
                                    width:100%;
                                    height:100%;
                                }
                            }
                            .head-content{
                                width:calc(100% - 72px);
                                display:flex;
                                flex-direction:column;
                                justify-content:space-between;
                            }

                        }
                        .item-content{
                            padding:16px 24px 0 72px;
                            .content-text{

                            }
                        }
                    }
                    >.item-comment{
                        width: 100%;
                        padding:16px 40px 20px 112px;
                        background-color: #e8eff5;
                        border-radius: 0px 0px 6px 6px;
                        .comment{
                            width:100%;
                            .comment_zan{
                                /*padding-bottom:16px;*/
                                /*border-bottom:1px solid #dee6ec;*/
                                line-height: 24px;
                                display:flex;
                                // align-items:center;
                                // flex-wrap:wrap;
                                >.zan_likes{
                                    width:calc(100% - 26px);
                                }
                            }
                            .comment_pinglun{
                                display:flex;
                                .pinglun_tx{
                                    width:36px;
                                    height:36px;
                                    margin-right:16px;
                                    >img{
                                        border-radius: 50%;
                                        width:100%;
                                        height:100%;
                                    }
                                }
                                .pinglun_item{
                                    width:calc(100% - 100px);
                                    .pinglun_input{

                                    }
                                }
                                .pinglun_btns{
                                    display:flex;
                                    align-items:flex-end;
                                    padding-bottom:2px;
                                    .pinglun_btn{
                                        width: 63px;
                                        height: 32px;
                                        background-color: #ff8f2b;
                                        border-radius: 6px;
                                        cursor: pointer;
                                        text-align: center;
                                        font-size: 14px;
                                        line-height: 31.5px;
                                        color: #ffffff;
                                    }
                                }

                            }
                          .bd-t{
                            border-top: 1px solid #dee6ec;
                          }
                        }
                    }
                }
            }
        }
        .ic_flag-fill{
            width: 11px;
            height: 13px;
            background-image: url("~@/assets/img/project/info/ic_flag-fill.png");
        }
        .add_new-job{
            width: 12px;
            height: 12px;
            background-image: url("~@/assets/img/project/add_new-job.png");
        }
        .ic_delete-fill{
            width: 14px;
            height: 14px;
            background-image: url("~@/assets/img/project/dynamic/ic_delete-fill.png");
        }
        .ic_down{
            width: 5px;
            height: 14px;
            background-image: url("~@/assets/img/project/dynamic/ic_down.png");
        }
        .ic_edit{
            width: 14px;
            height: 14px;
            background-image: url("~@/assets/img/project/dynamic/ic_edit.png");
        }
        .ic_fill{
            width: 12px;
            height: 12px;
            background-image: url("~@/assets/img/project/dynamic/ic_fill.png");
        }
        .ic_flat{
            width: 6px;
            height: 1px;
            background-image: url("~@/assets/img/project/dynamic/ic_flat.png");
        }
        .ic_schedule{
            width: 12px;
            height: 12px;
            background-image: url("~@/assets/img/project/dynamic/ic_schedule.png");
        }
        .ic_up{
            width: 5px;
            height: 14px;
            background-image: url("~@/assets/img/project/dynamic/ic_up.png");
        }
        .ic_like{
            width: 15px;
            height: 14px;
            background-image: url("~@/assets/img/project/info/ic_like.png");
        }
        .ic_dislike{
            width: 15px;
            height: 14px;
            background-image: url("~@/assets/img/project/info/ic_dislike.png");
        }
        .ic_comment-dots{
            width: 13px;
            height: 14px;
            background-image: url("~@/assets/img/project/info/ic_comment-dots.png");
        }
	}
</style>
<style lang="scss">
    .main-dynamic{
        .pinglun_input{
            .el-textarea__inner{
                min-height:36px !important;
            }
        }
    }

</style>
